<!--
 * @Author: ray ray.chin@163.com
 * @Date: 2022-01-14 13:36:46
 * @LastEditors: ray ray.chin@163.com
 * @LastEditTime: 2024-06-10 11:49:20
 * @FilePath: /app-template-uni-upgrade/src/pagesRayTemplate/pages/other/other.vue
 * @Description: 模板项目导航页
 * Copyright (c) 2023 by ray ray.chin@163.com, All Rights Reserved.
-->
<template>
    <!-- :class="[{'main-padding': (!showTimestampTips && !loading)}]" -->
    <view class="main"
    >
        <view class="toolbar-left"
            @tap.stop="closeApp()"
            v-show="false"
        >
            <image class="toolbar-left-icon"
                src="/static/imgs/icon/home_back.png"
            ></image>
        </view>

        <view class="tab-main">
            <view class="tab-container"
                :class="[tabShowFunction ? 'tab-container__' : '']"
            >
                <wuc-tab
                    :tab-list="tabList"
                    :tabCur.sync="tabCurrent"
                    tab-class="text-center text-black bg-white"
                    select-class="text-blue"
                    @change="tabChange"
                />
            </view>
            <view class="tab-function"
                v-show="tabShowFunction"
                @tap.stop="tabFunction()"
            >
                <image class="tab-function-icon"
                    src="/static/imgs/icon/icon_tab_function.png"
                ></image>
            </view>
        </view>
        <view class="content">
            <template v-for="(item, index) in tabList">
                <view
                    v-if="tabCurrent == index"
                    :key="`tabContent${index}`"
                >
                    {{ `选项卡${index + 1}的内容` }}
                </view>
            </template>
        </view>

        <uni-popup ref="tabPopup" type="top" :animation="true">弹出 Popup</uni-popup>

        <ray-tab :current="'1'" />
    </view>
</template>

<script>
import wucTab from "@/components/wuc-tab/wuc-tab.vue";
import uPopup from "@/components/uni-popup/uni-popup.vue";

export default {
    components: {
        wucTab,
        uPopup
    },
    data() {
        return {
            tabShowFunction: true,
            // wuc-tab，参考https://ext.dcloud.net.cn/plugin?id=300
            tabList: [
                { name: '选项卡一' },
                { name: '选项卡二' },
                { name: '选项卡三' },
                { name: '选项卡四' },
                { name: '选项卡五' },
                { name: '选项卡六' },
                { name: '选项卡七' },
                { name: '选项卡八' }
            ],
            tabCurrent: 0,
            // 分段器样式类型，可选值：button（按钮类型），text（文字类型）
            tabMode: "button",
        };
    },
    computed: {
		/**
		 * userid
		 */
		userId() {
			if (!this.$route.query.userId) {
				return "";
			}
			return this.$route.query.userId;
		},
    },
    onLoad() {
    },
    onShow() {
    },
    mounted() {
    },
    async created() {
        let __this = this;
    },
    watch: {
    },
    methods: {
        closeApp () {},
        tabFunction () {
            if (this.$refs.tabPopup.showPopup) {
                this.$refs.tabPopup.close();
                return;
            }
            // 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
            this.$refs.tabPopup.open();
        },
        tabChange (index) {
            if (this.tabCurrent != index) {
                this.tabCurrent = index;
            }
        },
    },
};
</script>

<style lang="scss" scoped >
uni-page-body {
    width: 100vw;
    overflow: hidden;
    background: #fff;
}

/deep/ .uni-transition {
    top: 100px !important;
    background: #ffffff !important;
}

.main-padding {
    padding-bottom: 100rpx;
}
.main {
    height: 100%;
    width: 100%;

    .toolbar-left {
        position: fixed;
        top: 15rpx;
        left: 15rpx;
        z-index: 998;
        font-size: 30rpx;
        color: #000;

        .toolbar-left-icon {
            width: 60rpx;
            height: 60rpx;
        }
    }

    .tab-main {
        display: flex;
        width: 100%;
        align-items: center;
    }
    .tab-container {
        width: 100%;
    }
    .tab-container__ {
        width: 90%;
    }
    .tab-function {
        position: fixed;
        right: 15rpx;
        font-size: 30rpx;
        color: #000;
        padding: 0 0rpx 0 30rpx;

        .tab-function-icon {
            width: 60rpx;
            height: 60rpx;
        }
    }

    // wuc-tab样式
    .text-black{
        color: #333333;
    }
    .bg-white{
        background-color: #ffffff;
    }
    .text-center {
        text-align: center;
    }
}
</style>